import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ArtistRight } from "./style";
import { artistListAction } from "../../../pages/discover/d-pages/artist/store/actionType";
import { zm } from "@/services/local-data";
import classNames from "classnames";
import { NavLink } from "react-router-dom";
import { getSizeImage } from "@/utils/format-utils";
import Loading from "@/components/loading";

export default memo(function Artist(props) {
  const type = props.type;
  const area = props.area;
  const url = props.url;
  const initial = props.initial;
  const dispatch = useDispatch();
  const [a, setA] = useState(0);

  useEffect(() => {
    if (initial) {
      dispatch(artistListAction(100, 0, type, area, initial));
    } else {
      dispatch(artistListAction(100, 0, type, area, -1));
    }
    setA(0);
  }, [dispatch, initial, type, area]); // eslint-disable-line react-hooks/exhaustive-deps

  const state = useSelector(
    (state) => ({
      artistList: state.getIn(["artist", "artistList"]),
    }),
    shallowEqual
  );

  const selectZm = (limit, offset, type, area, initial) => {
    dispatch(artistListAction(limit, offset, type, area, initial));
  };

  useEffect(() => {
    if (state.artistList.artists) {
      setA(1);
    }
  }, [state.artistList]);

  document.title = `${props.name} - 歌手 - 网易云音乐`;

  return (
    <ArtistRight>
      {a === 1 ? (
        <>
          {" "}
          <div className="r-title">
            <h3>{props.name}</h3>
          </div>
          <div className="zm-box">
            <ul>
              {zm.map((item, index) => {
                const isSelect = item.initial == initial;
                return (
                  <li
                    key={item.title}
                    className={classNames({ isSelect: isSelect })}
                  >
                    <NavLink
                      to={{
                        pathname: "/discover/artist/cat",
                        search:
                          "?id=" +
                          url +
                          "?type=" +
                          type +
                          "?area=" +
                          area +
                          "?initial=" +
                          item.initial,
                      }}
                      onClick={(e) =>
                        selectZm(100, 0, type, area, item.initial)
                      }
                    >
                      {item.title}
                    </NavLink>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="r-img-box">
            <ul>
              {state.artistList.length !== 0
                ? state.artistList.artists.slice(0, 10).map((item, index) => {
                    return (
                      <li className="ten-li-box" key={index}>
                        <div className="ten-li-img">
                          <img src={getSizeImage(item.img1v1Url, 130)} alt="" />
                          <NavLink
                            to={{
                              pathname: "/artist",
                              search: "?id=" + item.id,
                            }}
                            title={item.name + "的音乐"}
                            className="coverall"
                          >
                            {" "}
                          </NavLink>
                        </div>
                        <div className="ten-li-name">
                          <span>
                            <NavLink
                              to={{
                                pathname: "/artist",
                                search: "?id=" + item.id,
                              }}
                            >
                              {item.name}
                            </NavLink>
                          </span>
                          {item.accountId !== undefined ? (
                            <NavLink
                              to={{
                                pathname: "/user/home",
                                search: "?id=" + item.accountId,
                              }}
                            >
                              <i className="imgIcon"></i>
                            </NavLink>
                          ) : (
                            ""
                          )}
                        </div>
                      </li>
                    );
                  })
                : ""}
            </ul>
          </div>
          <div className="r-text-box">
            <ul>
              {state.artistList.length !== 0
                ? state.artistList.artists.slice(10, 100).map((item, index) => {
                    return (
                      <li key={index}>
                        <span>
                          <NavLink
                            to={{
                              pathname: "/artist",
                              search: "?id=" + item.id,
                            }}
                          >
                            {item.name}
                          </NavLink>
                        </span>
                        {item.accountId !== undefined ? (
                          <NavLink
                            to={{
                              pathname: "/user/home",
                              search: "?id=" + item.accountId,
                            }}
                          >
                            <i className="imgIcon"></i>
                          </NavLink>
                        ) : (
                          ""
                        )}
                      </li>
                    );
                  })
                : ""}
            </ul>
          </div>
        </>
      ) : (
        <div className="loading">
          <Loading />
        </div>
      )}
    </ArtistRight>
  );
});
